<template>
  <div class="app">
    counter: {{ state.counter }}
    <button @click="changeCounter">changeCounter</button>
    <hr />
    number: {{ number }}
    <button @click="changeNumber">changeNumber</button>
    <Child></Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
import { reactive, ref, watch } from 'vue'
const state = reactive({
  counter: 100
})
const number = ref(200)

const changeCounter = () => {
  state.counter++
}
const changeNumber = () => {
  number.value++
}

watch(
  () => state.counter,
  (counter, preCounter) => {
    console.log(counter, preCounter)
  }
)

watch(
  number,
  (number, preNumber) => {
    console.log(number, preNumber)
  },
  { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped></style>
